<!doctype html>

<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>toolbarfactory.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>

<div class="clear"></div>

<h2><a href="closure_goog_ui_editor_toolbarfactory.js.html">toolbarfactory.js</a></h2>

<pre class="prettyprint lang-js">
<a name="line1"></a>// Copyright 2008 The Closure Library Authors. All Rights Reserved.
<a name="line2"></a>//
<a name="line3"></a>// Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
<a name="line4"></a>// you may not use this file except in compliance with the License.
<a name="line5"></a>// You may obtain a copy of the License at
<a name="line6"></a>//
<a name="line7"></a>//      http://www.apache.org/licenses/LICENSE-2.0
<a name="line8"></a>//
<a name="line9"></a>// Unless required by applicable law or agreed to in writing, software
<a name="line10"></a>// distributed under the License is distributed on an &quot;AS-IS&quot; BASIS,
<a name="line11"></a>// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
<a name="line12"></a>// See the License for the specific language governing permissions and
<a name="line13"></a>// limitations under the License.
<a name="line14"></a>
<a name="line15"></a>/**
<a name="line16"></a> * @fileoverview Generic factory functions for creating the building blocks for
<a name="line17"></a> * an editor toolbar.
<a name="line18"></a> *
<a name="line19"></a> * @author attila@google.com (Attila Bodis)
<a name="line20"></a> * @author jparent@google.com (Julie Parent)
<a name="line21"></a> */
<a name="line22"></a>
<a name="line23"></a>goog.provide(&#39;goog.ui.editor.ToolbarFactory&#39;);
<a name="line24"></a>
<a name="line25"></a>goog.require(&#39;goog.array&#39;);
<a name="line26"></a>goog.require(&#39;goog.dom&#39;);
<a name="line27"></a>goog.require(&#39;goog.string&#39;);
<a name="line28"></a>goog.require(&#39;goog.string.Unicode&#39;);
<a name="line29"></a>goog.require(&#39;goog.style&#39;);
<a name="line30"></a>goog.require(&#39;goog.ui.Component.State&#39;);
<a name="line31"></a>goog.require(&#39;goog.ui.Container.Orientation&#39;);
<a name="line32"></a>goog.require(&#39;goog.ui.ControlContent&#39;);
<a name="line33"></a>goog.require(&#39;goog.ui.Option&#39;);
<a name="line34"></a>goog.require(&#39;goog.ui.Toolbar&#39;);
<a name="line35"></a>goog.require(&#39;goog.ui.ToolbarButton&#39;);
<a name="line36"></a>goog.require(&#39;goog.ui.ToolbarColorMenuButton&#39;);
<a name="line37"></a>goog.require(&#39;goog.ui.ToolbarMenuButton&#39;);
<a name="line38"></a>goog.require(&#39;goog.ui.ToolbarRenderer&#39;);
<a name="line39"></a>goog.require(&#39;goog.ui.ToolbarSelect&#39;);
<a name="line40"></a>goog.require(&#39;goog.userAgent&#39;);
<a name="line41"></a>
<a name="line42"></a>
<a name="line43"></a>/**
<a name="line44"></a> * Takes a font spec (e.g. &quot;Arial, Helvetica, sans-serif&quot;) and returns the
<a name="line45"></a> * primary font name, normalized to lowercase (e.g. &quot;arial&quot;).
<a name="line46"></a> * @param {string} fontSpec Font specification.
<a name="line47"></a> * @return {string} The primary font name, in lowercase.
<a name="line48"></a> */
<a name="line49"></a>goog.ui.editor.ToolbarFactory.getPrimaryFont = function(fontSpec) {
<a name="line50"></a>  var i = fontSpec.indexOf(&#39;,&#39;);
<a name="line51"></a>  var fontName = (i != -1 ? fontSpec.substring(0, i) : fontSpec).toLowerCase();
<a name="line52"></a>  // Strip leading/trailing quotes from the font name (bug 1050118).
<a name="line53"></a>  return goog.string.stripQuotes(fontName, &#39;&quot;\&#39;&#39;);
<a name="line54"></a>};
<a name="line55"></a>
<a name="line56"></a>
<a name="line57"></a>/**
<a name="line58"></a> * Bulk-adds fonts to the given font menu button.  The argument must be an
<a name="line59"></a> * array of font descriptor objects, each of which must have the following
<a name="line60"></a> * attributes:
<a name="line61"></a> * &lt;ul&gt;
<a name="line62"></a> *   &lt;li&gt;{@code caption} - Caption to show in the font menu (e.g. &#39;Tahoma&#39;)
<a name="line63"></a> *   &lt;li&gt;{@code value} - Value for the corresponding &#39;font-family&#39; CSS style
<a name="line64"></a> *       (e.g. &#39;Tahoma, Arial, sans-serif&#39;)
<a name="line65"></a> * &lt;/ul&gt;
<a name="line66"></a> * @param {!goog.ui.Select} button Font menu button.
<a name="line67"></a> * @param {!Array.&lt;{caption: string, value: string}&gt;} fonts Array of
<a name="line68"></a> *     font descriptors.
<a name="line69"></a> */
<a name="line70"></a>goog.ui.editor.ToolbarFactory.addFonts = function(button, fonts) {
<a name="line71"></a>  goog.array.forEach(fonts, function(font) {
<a name="line72"></a>    goog.ui.editor.ToolbarFactory.addFont(button, font.caption, font.value);
<a name="line73"></a>  });
<a name="line74"></a>};
<a name="line75"></a>
<a name="line76"></a>
<a name="line77"></a>/**
<a name="line78"></a> * Adds a menu item to the given font menu button.  The first font listed in
<a name="line79"></a> * the {@code value} argument is considered the font ID, so adding two items
<a name="line80"></a> * whose CSS style starts with the same font may lead to unpredictable results.
<a name="line81"></a> * @param {!goog.ui.Select} button Font menu button.
<a name="line82"></a> * @param {string} caption Caption to show for the font menu.
<a name="line83"></a> * @param {string} value Value for the corresponding &#39;font-family&#39; CSS style.
<a name="line84"></a> */
<a name="line85"></a>goog.ui.editor.ToolbarFactory.addFont = function(button, caption, value) {
<a name="line86"></a>  // The font ID is the first font listed in the CSS style, normalized to
<a name="line87"></a>  // lowercase.
<a name="line88"></a>  var id = goog.ui.editor.ToolbarFactory.getPrimaryFont(value);
<a name="line89"></a>
<a name="line90"></a>  // Construct the option, and add it to the button.
<a name="line91"></a>  var option = new goog.ui.Option(caption, value, button.getDomHelper());
<a name="line92"></a>  option.setId(id);
<a name="line93"></a>  button.addItem(option);
<a name="line94"></a>
<a name="line95"></a>  // Captions are shown in their own font.
<a name="line96"></a>  option.getContentElement().style.fontFamily = value;
<a name="line97"></a>};
<a name="line98"></a>
<a name="line99"></a>
<a name="line100"></a>/**
<a name="line101"></a> * Bulk-adds font sizes to the given font size menu button.  The argument must
<a name="line102"></a> * be an array of font size descriptor objects, each of which must have the
<a name="line103"></a> * following attributes:
<a name="line104"></a> * &lt;ul&gt;
<a name="line105"></a> *   &lt;li&gt;{@code caption} - Caption to show in the font size menu (e.g. &#39;Huge&#39;)
<a name="line106"></a> *   &lt;li&gt;{@code value} - Value for the corresponding HTML font size (e.g. 6)
<a name="line107"></a> * &lt;/ul&gt;
<a name="line108"></a> * @param {!goog.ui.Select} button Font size menu button.
<a name="line109"></a> * @param {!Array.&lt;{caption: string, value:number}&gt;} sizes Array of font
<a name="line110"></a> *     size descriptors.
<a name="line111"></a> */
<a name="line112"></a>goog.ui.editor.ToolbarFactory.addFontSizes = function(button, sizes) {
<a name="line113"></a>  goog.array.forEach(sizes, function(size) {
<a name="line114"></a>    goog.ui.editor.ToolbarFactory.addFontSize(button, size.caption, size.value);
<a name="line115"></a>  });
<a name="line116"></a>};
<a name="line117"></a>
<a name="line118"></a>
<a name="line119"></a>/**
<a name="line120"></a> * Adds a menu item to the given font size menu button.  The {@code value}
<a name="line121"></a> * argument must be a legacy HTML font size in the 0-7 range.
<a name="line122"></a> * @param {!goog.ui.Select} button Font size menu button.
<a name="line123"></a> * @param {string} caption Caption to show in the font size menu.
<a name="line124"></a> * @param {number} value Value for the corresponding HTML font size.
<a name="line125"></a> */
<a name="line126"></a>goog.ui.editor.ToolbarFactory.addFontSize = function(button, caption, value) {
<a name="line127"></a>  // Construct the option, and add it to the button.
<a name="line128"></a>  var option = new goog.ui.Option(caption, value, button.getDomHelper());
<a name="line129"></a>  button.addItem(option);
<a name="line130"></a>
<a name="line131"></a>  // Adjust the font size of the menu item and the height of the checkbox
<a name="line132"></a>  // element after they&#39;ve been rendered by addItem().  Captions are shown in
<a name="line133"></a>  // the corresponding font size, and lining up the checkbox is tricky.
<a name="line134"></a>  var content = option.getContentElement();
<a name="line135"></a>  content.style.fontSize =
<a name="line136"></a>      goog.ui.editor.ToolbarFactory.getPxFromLegacySize(value) + &#39;px&#39;;
<a name="line137"></a>  content.firstChild.style.height = &#39;1.1em&#39;;
<a name="line138"></a>};
<a name="line139"></a>
<a name="line140"></a>
<a name="line141"></a>/**
<a name="line142"></a> * Converts a legacy font size specification into an equivalent pixel size.
<a name="line143"></a> * For example, {@code &amp;lt;font size=&quot;6&quot;&amp;gt;} is {@code font-size: 32px;}, etc.
<a name="line144"></a> * @param {number} fontSize Legacy font size spec in the 0-7 range.
<a name="line145"></a> * @return {number} Equivalent pixel size.
<a name="line146"></a> */
<a name="line147"></a>goog.ui.editor.ToolbarFactory.getPxFromLegacySize = function(fontSize) {
<a name="line148"></a>  return goog.ui.editor.ToolbarFactory.LEGACY_SIZE_TO_PX_MAP_[fontSize] || 10;
<a name="line149"></a>};
<a name="line150"></a>
<a name="line151"></a>
<a name="line152"></a>/**
<a name="line153"></a> * Converts a pixel font size specification into an equivalent legacy size.
<a name="line154"></a> * For example, {@code font-size: 32px;} is {@code &amp;lt;font size=&quot;6&quot;&amp;gt;}, etc.
<a name="line155"></a> * If the given pixel size doesn&#39;t exactly match one of the legacy sizes, -1 is
<a name="line156"></a> * returned.
<a name="line157"></a> * @param {number} px Pixel font size.
<a name="line158"></a> * @return {number} Equivalent legacy size spec in the 0-7 range, or -1 if none
<a name="line159"></a> *     exists.
<a name="line160"></a> */
<a name="line161"></a>goog.ui.editor.ToolbarFactory.getLegacySizeFromPx = function(px) {
<a name="line162"></a>  // Use lastIndexOf to get the largest legacy size matching the pixel size
<a name="line163"></a>  // (most notably returning 1 instead of 0 for 10px).
<a name="line164"></a>  return goog.array.lastIndexOf(
<a name="line165"></a>      goog.ui.editor.ToolbarFactory.LEGACY_SIZE_TO_PX_MAP_, px);
<a name="line166"></a>};
<a name="line167"></a>
<a name="line168"></a>
<a name="line169"></a>/**
<a name="line170"></a> * Map of legacy font sizes (0-7) to equivalent pixel sizes.
<a name="line171"></a> * @type {Array.&lt;number&gt;}
<a name="line172"></a> * @private
<a name="line173"></a> */
<a name="line174"></a>goog.ui.editor.ToolbarFactory.LEGACY_SIZE_TO_PX_MAP_ =
<a name="line175"></a>    [10, 10, 13, 16, 18, 24, 32, 48];
<a name="line176"></a>
<a name="line177"></a>
<a name="line178"></a>/**
<a name="line179"></a> * Bulk-adds format options to the given &quot;Format block&quot; menu button.  The
<a name="line180"></a> * argument must be an array of format option descriptor objects, each of
<a name="line181"></a> * which must have the following attributes:
<a name="line182"></a> * &lt;ul&gt;
<a name="line183"></a> *   &lt;li&gt;{@code caption} - Caption to show in the menu (e.g. &#39;Minor heading&#39;)
<a name="line184"></a> *   &lt;li&gt;{@code command} - Corresponding {@link goog.dom.TagName} (e.g.
<a name="line185"></a> *       &#39;H4&#39;)
<a name="line186"></a> * &lt;/ul&gt;
<a name="line187"></a> * @param {!goog.ui.Select} button &quot;Format block&quot; menu button.
<a name="line188"></a> * @param {!Array.&lt;{caption: string, command: goog.dom.TagName}&gt;} formats Array
<a name="line189"></a> *     of format option descriptors.
<a name="line190"></a> */
<a name="line191"></a>goog.ui.editor.ToolbarFactory.addFormatOptions = function(button, formats) {
<a name="line192"></a>  goog.array.forEach(formats, function(format) {
<a name="line193"></a>    goog.ui.editor.ToolbarFactory.addFormatOption(button, format.caption,
<a name="line194"></a>        format.command);
<a name="line195"></a>  });
<a name="line196"></a>};
<a name="line197"></a>
<a name="line198"></a>
<a name="line199"></a>/**
<a name="line200"></a> * Adds a menu item to the given &quot;Format block&quot; menu button.
<a name="line201"></a> * @param {!goog.ui.Select} button &quot;Format block&quot; menu button.
<a name="line202"></a> * @param {string} caption Caption to show in the menu.
<a name="line203"></a> * @param {goog.dom.TagName} tag Corresponding block format tag.
<a name="line204"></a> */
<a name="line205"></a>goog.ui.editor.ToolbarFactory.addFormatOption = function(button, caption, tag) {
<a name="line206"></a>  // Construct the option, and add it to the button.
<a name="line207"></a>  // TODO(attila): Create boring but functional menu item for now...
<a name="line208"></a>  var buttonDom = button.getDomHelper();
<a name="line209"></a>  var option = new goog.ui.Option(buttonDom.createDom(goog.dom.TagName.DIV,
<a name="line210"></a>      null, caption), tag, buttonDom);
<a name="line211"></a>  option.setId(tag);
<a name="line212"></a>  button.addItem(option);
<a name="line213"></a>};
<a name="line214"></a>
<a name="line215"></a>
<a name="line216"></a>/**
<a name="line217"></a> * Creates a {@link goog.ui.Toolbar} containing the specified set of
<a name="line218"></a> * toolbar buttons, and renders it into the given parent element.  Each
<a name="line219"></a> * item in the {@code items} array must a {@link goog.ui.Control}.
<a name="line220"></a> * @param {!Array.&lt;goog.ui.Control&gt;} items Toolbar items; each must
<a name="line221"></a> *     be a {@link goog.ui.Control}.
<a name="line222"></a> * @param {!Element} elem Toolbar parent element.
<a name="line223"></a> * @param {boolean=} opt_isRightToLeft Whether the editor chrome is
<a name="line224"></a> *     right-to-left; defaults to the directionality of the toolbar parent
<a name="line225"></a> *     element.
<a name="line226"></a> * @return {!goog.ui.Toolbar} Editor toolbar, rendered into the given parent
<a name="line227"></a> *     element.
<a name="line228"></a> */
<a name="line229"></a>goog.ui.editor.ToolbarFactory.makeToolbar = function(items, elem,
<a name="line230"></a>    opt_isRightToLeft) {
<a name="line231"></a>  var domHelper = goog.dom.getDomHelper(elem);
<a name="line232"></a>
<a name="line233"></a>  // Create an empty horizontal toolbar using the default renderer.
<a name="line234"></a>  var toolbar = new goog.ui.Toolbar(goog.ui.ToolbarRenderer.getInstance(),
<a name="line235"></a>      goog.ui.Container.Orientation.HORIZONTAL, domHelper);
<a name="line236"></a>
<a name="line237"></a>  // Optimization:  Explicitly test for the directionality of the parent
<a name="line238"></a>  // element here, so we can set it for both the toolbar and its children,
<a name="line239"></a>  // saving a lot of expensive calls to goog.style.isRightToLeft() during
<a name="line240"></a>  // rendering.
<a name="line241"></a>  var isRightToLeft = opt_isRightToLeft || goog.style.isRightToLeft(elem);
<a name="line242"></a>  toolbar.setRightToLeft(isRightToLeft);
<a name="line243"></a>
<a name="line244"></a>  // Optimization:  Set the toolbar to non-focusable before it is rendered,
<a name="line245"></a>  // to avoid creating unnecessary keyboard event handler objects.
<a name="line246"></a>  toolbar.setFocusable(false);
<a name="line247"></a>
<a name="line248"></a>  for (var i = 0, button; button = items[i]; i++) {
<a name="line249"></a>    // Optimization:  Set the button to non-focusable before it is rendered,
<a name="line250"></a>    // to avoid creating unnecessary keyboard event handler objects.  Also set
<a name="line251"></a>    // the directionality of the button explicitly, to avoid expensive calls
<a name="line252"></a>    // to goog.style.isRightToLeft() during rendering.
<a name="line253"></a>    button.setSupportedState(goog.ui.Component.State.FOCUSED, false);
<a name="line254"></a>    button.setRightToLeft(isRightToLeft);
<a name="line255"></a>    toolbar.addChild(button, true);
<a name="line256"></a>  }
<a name="line257"></a>
<a name="line258"></a>  toolbar.render(elem);
<a name="line259"></a>  return toolbar;
<a name="line260"></a>};
<a name="line261"></a>
<a name="line262"></a>
<a name="line263"></a>/**
<a name="line264"></a> * Creates a toolbar button with the given ID, tooltip, and caption.  Applies
<a name="line265"></a> * any custom CSS class names to the button&#39;s caption element.
<a name="line266"></a> * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
<a name="line267"></a> *     built-in buttons, anything else for custom buttons.
<a name="line268"></a> * @param {string} tooltip Tooltip to be shown on hover.
<a name="line269"></a> * @param {goog.ui.ControlContent} caption Button caption.
<a name="line270"></a> * @param {string=} opt_classNames CSS class name(s) to apply to the caption
<a name="line271"></a> *     element.
<a name="line272"></a> * @param {goog.ui.ButtonRenderer=} opt_renderer Button renderer; defaults to
<a name="line273"></a> *     {@link goog.ui.ToolbarButtonRenderer} if unspecified.
<a name="line274"></a> * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
<a name="line275"></a> *     creation; defaults to the current document if unspecified.
<a name="line276"></a> * @return {!goog.ui.Button} A toolbar button.
<a name="line277"></a> */
<a name="line278"></a>goog.ui.editor.ToolbarFactory.makeButton = function(id, tooltip, caption,
<a name="line279"></a>    opt_classNames, opt_renderer, opt_domHelper) {
<a name="line280"></a>  var button = new goog.ui.ToolbarButton(
<a name="line281"></a>      goog.ui.editor.ToolbarFactory.createContent_(caption, opt_classNames,
<a name="line282"></a>          opt_domHelper),
<a name="line283"></a>      opt_renderer,
<a name="line284"></a>      opt_domHelper);
<a name="line285"></a>  button.setId(id);
<a name="line286"></a>  button.setTooltip(tooltip);
<a name="line287"></a>  return button;
<a name="line288"></a>};
<a name="line289"></a>
<a name="line290"></a>
<a name="line291"></a>/**
<a name="line292"></a> * Creates a toggle button with the given ID, tooltip, and caption. Applies
<a name="line293"></a> * any custom CSS class names to the button&#39;s caption element. The button
<a name="line294"></a> * returned has checkbox-like toggle semantics.
<a name="line295"></a> * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
<a name="line296"></a> *     built-in buttons, anything else for custom buttons.
<a name="line297"></a> * @param {string} tooltip Tooltip to be shown on hover.
<a name="line298"></a> * @param {goog.ui.ControlContent} caption Button caption.
<a name="line299"></a> * @param {string=} opt_classNames CSS class name(s) to apply to the caption
<a name="line300"></a> *     element.
<a name="line301"></a> * @param {goog.ui.ButtonRenderer=} opt_renderer Button renderer; defaults to
<a name="line302"></a> *     {@link goog.ui.ToolbarButtonRenderer} if unspecified.
<a name="line303"></a> * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
<a name="line304"></a> *     creation; defaults to the current document if unspecified.
<a name="line305"></a> * @return {!goog.ui.Button} A toggle button.
<a name="line306"></a> */
<a name="line307"></a>goog.ui.editor.ToolbarFactory.makeToggleButton = function(id, tooltip, caption,
<a name="line308"></a>    opt_classNames, opt_renderer, opt_domHelper) {
<a name="line309"></a>  var button = goog.ui.editor.ToolbarFactory.makeButton(id, tooltip, caption,
<a name="line310"></a>      opt_classNames, opt_renderer, opt_domHelper);
<a name="line311"></a>  button.setSupportedState(goog.ui.Component.State.CHECKED, true);
<a name="line312"></a>  return button;
<a name="line313"></a>};
<a name="line314"></a>
<a name="line315"></a>
<a name="line316"></a>/**
<a name="line317"></a> * Creates a menu button with the given ID, tooltip, and caption. Applies
<a name="line318"></a> * any custom CSS class names to the button&#39;s caption element.  The button
<a name="line319"></a> * returned doesn&#39;t have an actual menu attached; use {@link
<a name="line320"></a> * goog.ui.MenuButton#setMenu} to attach a {@link goog.ui.Menu} to the
<a name="line321"></a> * button.
<a name="line322"></a> * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
<a name="line323"></a> *     built-in buttons, anything else for custom buttons.
<a name="line324"></a> * @param {string} tooltip Tooltip to be shown on hover.
<a name="line325"></a> * @param {goog.ui.ControlContent} caption Button caption.
<a name="line326"></a> * @param {string=} opt_classNames CSS class name(s) to apply to the caption
<a name="line327"></a> *     element.
<a name="line328"></a> * @param {goog.ui.ButtonRenderer=} opt_renderer Button renderer; defaults to
<a name="line329"></a> *     {@link goog.ui.ToolbarMenuButtonRenderer} if unspecified.
<a name="line330"></a> * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
<a name="line331"></a> *     creation; defaults to the current document if unspecified.
<a name="line332"></a> * @return {!goog.ui.MenuButton} A menu button.
<a name="line333"></a> */
<a name="line334"></a>goog.ui.editor.ToolbarFactory.makeMenuButton = function(id, tooltip, caption,
<a name="line335"></a>    opt_classNames, opt_renderer, opt_domHelper) {
<a name="line336"></a>  var button = new goog.ui.ToolbarMenuButton(
<a name="line337"></a>      goog.ui.editor.ToolbarFactory.createContent_(caption, opt_classNames,
<a name="line338"></a>          opt_domHelper),
<a name="line339"></a>      null,
<a name="line340"></a>      opt_renderer,
<a name="line341"></a>      opt_domHelper);
<a name="line342"></a>  button.setId(id);
<a name="line343"></a>  button.setTooltip(tooltip);
<a name="line344"></a>  return button;
<a name="line345"></a>};
<a name="line346"></a>
<a name="line347"></a>
<a name="line348"></a>/**
<a name="line349"></a> * Creates a select button with the given ID, tooltip, and caption. Applies
<a name="line350"></a> * any custom CSS class names to the button&#39;s root element.  The button
<a name="line351"></a> * returned doesn&#39;t have an actual menu attached; use {@link
<a name="line352"></a> * goog.ui.Select#setMenu} to attach a {@link goog.ui.Menu} containing
<a name="line353"></a> * {@link goog.ui.Option}s to the select button.
<a name="line354"></a> * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
<a name="line355"></a> *     built-in buttons, anything else for custom buttons.
<a name="line356"></a> * @param {string} tooltip Tooltip to be shown on hover.
<a name="line357"></a> * @param {goog.ui.ControlContent} caption Button caption; used as the
<a name="line358"></a> *     default caption when nothing is selected.
<a name="line359"></a> * @param {string=} opt_classNames CSS class name(s) to apply to the button&#39;s
<a name="line360"></a> *     root element.
<a name="line361"></a> * @param {goog.ui.MenuButtonRenderer=} opt_renderer Button renderer;
<a name="line362"></a> *     defaults to {@link goog.ui.ToolbarMenuButtonRenderer} if unspecified.
<a name="line363"></a> * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
<a name="line364"></a> *     creation; defaults to the current document if unspecified.
<a name="line365"></a> * @return {!goog.ui.Select} A select button.
<a name="line366"></a> */
<a name="line367"></a>goog.ui.editor.ToolbarFactory.makeSelectButton = function(id, tooltip, caption,
<a name="line368"></a>    opt_classNames, opt_renderer, opt_domHelper) {
<a name="line369"></a>  var button = new goog.ui.ToolbarSelect(null, null,
<a name="line370"></a>      opt_renderer,
<a name="line371"></a>      opt_domHelper);
<a name="line372"></a>  if (opt_classNames) {
<a name="line373"></a>    // Unlike the other button types, for goog.ui.Select buttons we apply the
<a name="line374"></a>    // extra class names to the root element, because for select buttons the
<a name="line375"></a>    // caption isn&#39;t stable (as it changes each time the selection changes).
<a name="line376"></a>    goog.array.forEach(opt_classNames.split(/\s+/), button.addClassName,
<a name="line377"></a>        button);
<a name="line378"></a>  }
<a name="line379"></a>  button.addClassName(goog.getCssName(&#39;goog-toolbar-select&#39;));
<a name="line380"></a>  button.setDefaultCaption(caption);
<a name="line381"></a>  button.setId(id);
<a name="line382"></a>  button.setTooltip(tooltip);
<a name="line383"></a>  return button;
<a name="line384"></a>};
<a name="line385"></a>
<a name="line386"></a>
<a name="line387"></a>/**
<a name="line388"></a> * Creates a color menu button with the given ID, tooltip, and caption.
<a name="line389"></a> * Applies any custom CSS class names to the button&#39;s caption element.  The
<a name="line390"></a> * button is created with a default color menu containing standard color
<a name="line391"></a> * palettes.
<a name="line392"></a> * @param {string} id Button ID; must equal a {@link goog.editor.Command} for
<a name="line393"></a> *     built-in toolbar buttons, but can be anything else for custom buttons.
<a name="line394"></a> * @param {string} tooltip Tooltip to be shown on hover.
<a name="line395"></a> * @param {goog.ui.ControlContent} caption Button caption.
<a name="line396"></a> * @param {string=} opt_classNames CSS class name(s) to apply to the caption
<a name="line397"></a> *     element.
<a name="line398"></a> * @param {goog.ui.ColorMenuButtonRenderer=} opt_renderer Button renderer;
<a name="line399"></a> *     defaults to {@link goog.ui.ToolbarColorMenuButtonRenderer}
<a name="line400"></a> *     if unspecified.
<a name="line401"></a> * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
<a name="line402"></a> *     creation; defaults to the current document if unspecified.
<a name="line403"></a> * @return {!goog.ui.ColorMenuButton} A color menu button.
<a name="line404"></a> */
<a name="line405"></a>goog.ui.editor.ToolbarFactory.makeColorMenuButton = function(id, tooltip,
<a name="line406"></a>    caption, opt_classNames, opt_renderer, opt_domHelper) {
<a name="line407"></a>  var button = new goog.ui.ToolbarColorMenuButton(
<a name="line408"></a>      goog.ui.editor.ToolbarFactory.createContent_(caption, opt_classNames,
<a name="line409"></a>          opt_domHelper),
<a name="line410"></a>      null,
<a name="line411"></a>      opt_renderer,
<a name="line412"></a>      opt_domHelper);
<a name="line413"></a>  button.setId(id);
<a name="line414"></a>  button.setTooltip(tooltip);
<a name="line415"></a>  return button;
<a name="line416"></a>};
<a name="line417"></a>
<a name="line418"></a>
<a name="line419"></a>/**
<a name="line420"></a> * Creates a new DIV that wraps a button caption, optionally applying CSS
<a name="line421"></a> * class names to it.  Used as a helper function in button factory methods.
<a name="line422"></a> * @param {goog.ui.ControlContent} caption Button caption.
<a name="line423"></a> * @param {string=} opt_classNames CSS class name(s) to apply to the DIV that
<a name="line424"></a> *     wraps the caption (if any).
<a name="line425"></a> * @param {goog.dom.DomHelper=} opt_domHelper DOM helper, used for DOM
<a name="line426"></a> *     creation; defaults to the current document if unspecified.
<a name="line427"></a> * @return {!Element} DIV that wraps the caption.
<a name="line428"></a> * @private
<a name="line429"></a> */
<a name="line430"></a>goog.ui.editor.ToolbarFactory.createContent_ = function(caption, opt_classNames,
<a name="line431"></a>    opt_domHelper) {
<a name="line432"></a>  // FF2 doesn&#39;t like empty DIVs, especially when rendered right-to-left.
<a name="line433"></a>  if ((!caption || caption == &#39;&#39;) &amp;&amp; goog.userAgent.GECKO &amp;&amp;
<a name="line434"></a>      !goog.userAgent.isVersion(&#39;1.9a&#39;)) {
<a name="line435"></a>    caption = goog.string.Unicode.NBSP;
<a name="line436"></a>  }
<a name="line437"></a>  return (opt_domHelper || goog.dom.getDomHelper()).createDom(
<a name="line438"></a>      goog.dom.TagName.DIV,
<a name="line439"></a>      opt_classNames ? {&#39;class&#39; : opt_classNames} : null, caption);
<a name="line440"></a>};
</pre>


</body>
</html>
